import React, { Component } from 'react';
import {
    NavBar,
    List,
    Button,
    WhiteSpace,
    WingBlank,
    Popover,
    Icon,
} from 'antd-mobile';
import request from '../plugins/request';
import { dateFormat } from '../plugins/utility';

class BlogList extends Component {
    constructor(props) {
        super(props);

        this.state = {
            blogList: [],
            visible: false,
            selected: '',
            user: window.sessionStorage.getItem('user'),
        };
    }

    async componentDidMount() {
        const res = await request.get('/blogs');
        console.log(res);
        this.setState({ blogList: res.data });
    }

    onSelect = (opt) => {
        // console.log(opt.props.value);
        this.setState({
            visible: false,
            selected: opt.props.value,
        });
        let action = opt.props.value;
        if (action === 'logout') {
            // 清空 sessionStorage 中的用户 token
            window.sessionStorage.clear();
            // 挑战到登录页面
            this.props.history.push('/login');
        }
    };

    handleVisibleChange = (visible) => {
        this.setState({
            visible,
        });
    };

    render() {
        return (
            <div className="blog-list">
                {/* 顶部导航 */}
                <NavBar
                    mode="light"
                    rightContent={
                        <Popover
                            mask
                            overlayClassName="fortest"
                            overlayStyle={{ color: 'currentColor' }}
                            visible={this.state.visible}
                            overlay={[
                                <Popover.Item value="logout">
                                    <i
                                        className="iconfont icontuichudenglu"
                                        style={{ marginRight: '5px' }}
                                    ></i>
                                    退出登录
                                </Popover.Item>,
                            ]}
                            align={{
                                overflow: { adjustY: 0, adjustX: 0 },
                                offset: [-10, 0],
                            }}
                            onVisibleChange={this.handleVisibleChange}
                            onSelect={this.onSelect}
                        >
                            <div
                                style={{
                                    height: '100%',
                                    padding: '0 15px',
                                    marginRight: '-15px',
                                    display: 'flex',
                                    alignItems: 'center',
                                }}
                            >
                                <Icon type="ellipsis" />
                            </div>
                        </Popover>
                    }
                >
                    网站博客
                </NavBar>

                {/* 渲染博客列表 */}

                <WingBlank>
                    <List renderHeader={() => '博客列表'}>
                        {this.state.blogList.map((blog) => {
                            return (
                                <List.Item
                                    key={blog.id}
                                    extra={
                                        this.state.user.nickname ===
                                        blog.nickname ? (
                                            <>
                                                <span>修改</span>{' '}
                                                <span>删除</span>
                                            </>
                                        ) : (
                                            ''
                                        )
                                    }
                                    align="top"
                                    thumb="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
                                >
                                    {blog.title}
                                    <List.Item.Brief>
                                        {blog.nickname}
                                    </List.Item.Brief>
                                </List.Item>
                            );
                        })}

                        <WhiteSpace />

                        <Button
                            type="primary"
                            onClick={() => {
                                this.props.history.push('/blogs/add');
                            }}
                        >
                            <i className="iconfont iconAdd"></i> 添加博客
                        </Button>
                    </List>
                </WingBlank>
            </div>
        );
    }
}

export default BlogList;
